<template>
  <div>
    <ElBreadcrumb separator="/">
      <ElBreadcrumbItem>当前：</ElBreadcrumbItem>
      <ElBreadcrumbItem :to="{ path: '/area' }">区域管理</ElBreadcrumbItem>
      <ElBreadcrumbItem>新增</ElBreadcrumbItem>
    </ElBreadcrumb>
    <div style="margin-top: 10px">
      <ElButton @click="addcity()" type="success">添加新的城市</ElButton>
      <ElButton @click="insert()" type="primary" style="margin-left: 20px">确定</ElButton>
      <ElForm style="margin-top: 10px">
        <ElFormItem label="区域名称："
          ><ElInput v-model="insertCondition.areaName" style="width: 300px"></ElInput>
        </ElFormItem>
        <ElFormItem label="" v-for="(e, i) in citys" :key="i"
          ><ElCard style="width: 600px"
            ><ElButton @click="delCity(i)" type="danger" size="small">删除城市</ElButton
            ><ElButton @click="addAddress(i, e.cityName)" type="success" size="small"
              >新增地址</ElButton
            >
            <br /><span>城市{{ i + 1 }}:</span>
            <ElSelect v-model="e.cityName">
              <ElOption
                v-for="(x, i) in incity"
                :key="i"
                :label="x.name"
                :value="x.name"
              ></ElOption> </ElSelect
            ><br />

            <template v-for="(e1, i1) in e.address" :key="i1"
              >地址{{ i1 + 1 }}:<ElInput v-model="e1.addressName" style="width: 350px"></ElInput
              ><ElButton
                @click="delAddress(i, i1)"
                size="small"
                style="margin-left: 5px"
                type="danger"
                >删除</ElButton
              ><br /></template
          ></ElCard>
        </ElFormItem>
      </ElForm>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'AreaInsert',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      insertCondition: {
        areaCode: '',
        areaName: '',
        address: [] as Array<any>
      },
      citys: [] as Array<any>,
      incity: [] as Array<any>
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.getCity()
  },
  methods: {
    // sampleM() {},
    addcity() {
      const newCity = {
        cityName: '',
        address: []
      }
      this.citys.push(newCity)
    },
    delCity(i: number) {
      this.citys.splice(i, 1)
    },
    addAddress(i: number, city: string) {
      const newAddress = { addressCode: 'a', addressName: '', cityName: city, addressFk: '' }
      this.citys[i].address.push(newAddress)
    },
    delAddress(i: number, i1: number) {
      this.citys[i].address.splice(i1, 1)
    },
    CopyAddress() {
      const cities: any = []
      this.citys.forEach((e) => {
        e.address.forEach((x: any) => {
          x.cityName = e.cityName
          cities.push(x)
        })
      })
      this.insertCondition.address = cities
    },
    async insert() {
      this.CopyAddress()
      await axios({
        method: 'POST',
        url: 'http://127.0.0.1:7003/Area/insert',
        data: this.insertCondition
      }).then(
        (res) => {
          ElMessage.success('添加成功')
          this.$router.push('/area')
          console.log(res.data)
        },
        (error) => {
          ElMessage.warning(error.response.data)
          console.log(error.response.data)
        }
      )
    },
    async getCity() {
      await axios({
        method: 'GET',
        url: 'http://127.0.0.1:7003/city/query'
      }).then(
        (res) => {
          console.log(res.data)
          this.incity = res.data
        },
        (error) => {
          console.log(error.response.data)
        }
      )
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
